<template>
  <div>
    <a-spin :spinning="tableLoading" :delay="500">
      <div style="cursor:pointer;position:relative;left:800px;top:80px;">
      <div
        class="ant-upload-preview"
        @click="$refs.modal.edit(1)"
        style=""
      >
        <a-icon type="cloud-upload-o" class="upload-icon" />
        <div class="mask">
          <a-icon type="plus" />
        </div>
        <img :src="form.head_portrait.url" v-if="form.head_portrait" />
        <img src="~@/assets/defaultHeadimg.png" alt="" v-else>
        </div>
      </div>
      <a-form-model
        :model="form"
        ref="firstStep"
        style="max-width: 1200px; margin: 0 auto;"
        :rules="rules"
      >
        <a-form-model-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
          <a-input style="width:300px;" v-model="form.name" />
          <a-button
            type="primary"
            style="margin-left:20px;"
            @click="$refs.student.showModel()"
          >选择在读学员</a-button>
        </a-form-model-item>
        <a-form-model-item
          label="手机号码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="main_phone"
        >
          <a-input :style="{width: 'calc(100% - 100px)'}" v-model="form.main_phone">
            <a-select
              slot="addonBefore"
              v-model="form.main_parent_type"
              style="width: 100px"
              :defaultValue="1"
            >
              <a-select-option :value="0">无</a-select-option>
              <a-select-option :value="1">本人</a-select-option>
              <a-select-option :value="2">妈妈</a-select-option>
              <a-select-option :value="3">爸爸</a-select-option>
              <a-select-option :value="4">爷爷</a-select-option>
              <a-select-option :value="5">奶奶</a-select-option>
              <a-select-option :value="6">外公</a-select-option>
              <a-select-option :value="7">外婆</a-select-option>
            </a-select>
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-model="form.sex">
            <a-radio :value="1">男</a-radio>
            <a-radio :value="2">女</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="出生日期"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          style="border-top:1px solid #e8e8e8;padding-top:15px;"
          v-if="!show"
        >
          <a-date-picker :format="dateFormat" style="width: 100%" v-model="birthday" @change="changeBirthday" />
        </a-form-model-item>
        <a-form-model-item label="学校" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!show">
          <a-input v-model="form.school_name" />
        </a-form-model-item>
        <a-form-model-item label="年级" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!show">
          <a-select
            v-model="form.grade_id"
            placeholder="请选择年级"
            style="width:300px;margin-right:20px;"
          >
            <a-select-option
              v-for="(item,index) in gradeSelect"
              :key="index"
              :disabled="item.is_enable==2"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
          <a-button @click="showChild('grade')">设置</a-button>
        </a-form-model-item>
        <a-form-model-item label="学员来源" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!show">
          <a-select
            v-model="form.source_id"
            placeholder="请选择学生来源"
            style="width:300px;margin-right:20px;"
          >
            <a-select-option
              v-for="(item,index) in sourceSelect"
              :disabled="item.is_enable==2"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
          <a-button @click="showChild('from')">设置</a-button>
        </a-form-model-item>
        <a-form-model-item
          label="备用号码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          prop="spare_phone"
          v-if="!show"
        >
          <a-input :style="{width: 'calc(100% - 100px)'}" v-model="form.spare_phone">
            <a-select slot="addonBefore" style="width: 100px" v-model="form.spare_phone_type">
              <a-select-option :value="0">无</a-select-option>
              <a-select-option :value="1">本人</a-select-option>
              <a-select-option :value="2">妈妈</a-select-option>
              <a-select-option :value="3">爸爸</a-select-option>
              <a-select-option :value="4">爷爷</a-select-option>
              <a-select-option :value="5">奶奶</a-select-option>
              <a-select-option :value="6">外公</a-select-option>
              <a-select-option :value="7">外婆</a-select-option>
            </a-select>
          </a-input>
        </a-form-model-item>
        <a-form-model-item label="家庭住址" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!show">
          <a-input v-model="form.address" />
        </a-form-model-item>
        <a-form-model-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol" v-if="!show">
          <a-input v-model="form.stu_remarks" placeholder="请输入(选填,最多输入100个字符)" :max-length="100" />
        </a-form-model-item>
        <a-form-model-item :wrapperCol="{span: 19, offset: 5}">
          <a-button type="primary" @click="nextStep('firstStep')" style="margin-right:20px;">下一步</a-button>
          <a-button @click="showOrHidden()" v-if="show">展开更多</a-button>
          <a-button @click="showOrHidden()" v-if="!show">收起</a-button>
        </a-form-model-item>
      </a-form-model>
      <a-divider />
      <div class="step-form-style-desc">
        <h3>提示</h3>
        <h4>*新学员报名后自动添加至学员管理</h4>
        <!-- <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>
      <h4>转账到银行卡</h4>
        <p>如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。</p>-->
      </div>
      <sources-model ref="sources" @reload="getSelect"></sources-model>
      <grade-model ref="grades" @reload="getSelect"></grade-model>
      <upload-avatar ref="modal" @ok="setavatar" />
      <student-model
        ref="student"
        :studentArr="readingStudent_index"
        @reload="studentModelReturnData"
      ></student-model>
    </a-spin>
  </div>
</template>

<script>
import moment from 'moment'
import sourcesModel from '@/components/studentSource'
import gradeModel from '@/components/gradeManage'
import { sourceList } from '@/api/sources'
import { gradeList } from '@/api/grade'
import uploadAvatar from '@/components/uploadAvatar'
import studentModel from '@/components/singleStudent'
export default {
  name: 'Step1',
  components: {
    sourcesModel,
    gradeModel,
    uploadAvatar,
    studentModel
  },
  props: ['dataSourse'],
  created() {
    if (this.dataSourse) {
      this.form = JSON.parse(JSON.stringify(this.dataSourse))
      this.birthday = this.form.birthday?moment(this.form.birthday):null,
      this.$forceUpdate()
    } else {
      
    }
    this.getSelect()
  },
  data() {
    return {
      show: true,
      tableLoading: false,
      gradeSelect: [],
      sourceSelect: [],
      dateFormat: 'YYYY-MM-DD',
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      birthday:moment(),
      form: {
        head_portrait: undefined,
        name: '',
        main_phone: undefined,
        main_parent_type: 1,
        sex: 1,
        birthday: undefined,
        school_name: '',
        grade_id: undefined,
        source_id: undefined,
        spare_phone_type: 2,
        spare_phone: undefined,
        address: undefined,
        stu_remarks: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        main_phone: [{ required: true, message: '请输入正确的家长联系方式', pattern: /^1[3456789]\d{9}$/ }],
        spare_phone: [{ required: false, message: '请输入正确的家长联系方式', pattern: /^1[3456789]\d{9}$/ }]
      },
      readingStudent_index: []
    }
  },
  methods: {
    getSelect() {
      this.loading = true
      gradeList({ pageSize: 999999,school_id:this.$store.state.user.school })
        .then(res => {
          this.gradeSelect = res.data
          sourceList({ pageSize: 999999,school_id:this.$store.state.user.school })
            .then(res => {
              this.sourceSelect = res.data
              this.tableLoading = false
            })
            .catch(err => {
              this.$message.error(err.data.message||'获取学员来源列表失败')
              this.tableLoading = false
            })
        })
        .catch(err => {
          this.$message.error(err.data.message||'获取年级列表失败')
          sourceList({ pageSize: 999999,school_id:this.$store.state.user.school })
            .then(res => {
              this.sourceSelect = res.data
              this.tableLoading = false
            })
            .catch(err => {
              this.$message.error(err.data.message||'获取学员来源列表失败')
              this.tableLoading = false
            })
        })
    },
    nextStep(formName) {
      // 先校验，通过表单校验后，才进入下一步
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit('nextStep', this.form)
        } else {
          return false
        }
      })
    },
    showOrHidden() {
      this.show = !this.show
    },
    showChild(e) {
      if (e == 'grade') {
        this.$refs.grades.showModal()
      } else if (e == 'from') {
        this.$refs.sources.showModal()
      }
    },
    setavatar(res) {
      // 设置头像
      this.form.head_portrait = res
    },
    removeHead() {
      this.form.head_portrait = null
    },
    moment,
    studentModelReturnData(e) {
      let params = JSON.parse(JSON.stringify(e))
      console.log(params)
      return
      this.$set(this.form, 'head_portrait', params.head_portrait)
      this.$set(this.form, 'name', params.name)
      this.$set(this.form, 'main_phone', params.main_phone)
      this.$set(this.form, 'main_parent_type', params.main_parent_type)
      this.$set(this.form, 'student_id', params.id)
      this.$set(this.form, 'sex', params.sex == 0 ? 1 : params.sex)
      this.nextStep('firstStep')
    },
    changeBirthday(data,string){
      this.form.birthday = string
    }
  }
}
</script>

<style lang="less" scoped>
.ant-upload-preview {
  position: relative;
  margin-left: 128px;
  width: 100%;
  max-width: 64px;
  margin-bottom: 20px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1rem;
    // padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 1rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -0.5rem;
      margin-top: -0.5rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
  }
}
form {
  .ant-row.ant-form-item {
    padding: 0 500px 0 100px;
  }
}
.step-form-style-desc {
  padding: 0 56px;
  color: rgba(0, 0, 0, 0.45);

  h3 {
    margin: 0 0 12px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    line-height: 32px;
  }

  h4 {
    margin: 0 0 4px;
    color: #ff8534;
    font-size: 14px;
    // padding-bottom: 15px;
  }

  p {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 22px;
  }
}
</style>
